<template>
  <view
    class="top"
    ref="top"
    :style="{
      height: navHeight + 20 + 'rpx',
    }"
  >
  </view>
  <!-- <view class="menuButtonheight" :style="{height: menuButtonheight + 'rpx',
		'top': navHeight+statusBarHeight + 'rpx',
	}">
	</view> -->
  <view
    class="topHeader"
    :style="{
      'padding-top': navHeight + 20 + 'rpx',
    }"
  >
    <view class="titleText">发布需求</view>
    <view class="ucenterHeader">
      <view class="topHeaderSub">
        <text
          :class="type == item.id ? 'active' : 'statusText'"
          @click.prevent="typeClick(item.id)"
          v-for="item in herder"
          :key="i"
          >{{ item.name }}</text
        >
      </view>
    </view>
    <view class="mainInfo">
      <view class="flex_row_start_center mainSub" v-if="subHeader.length > 0">
        <view
          class="statusText"
          v-for="item in subHeader"
          :key="index"
          :class="form.cat_id == item.id ? 'active' : ''"
          @click="typeClick1(item.id)"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="menuRow">
        <view class="tagMenu" v-if="type != '2'">
          <text style="width: 150rpx">测量方式</text>
          <view class="flex_row_start_center wight" @tap="changeSelect">
            <view class="info" v-show="form.visit != ''">
              {{
                form.visit == "0"
                  ? "无需上门"
                  : form.visit == "1"
                  ? "立即上门"
                  : form.visit == "2"
                  ? "预约上门"
                  : " "
              }}
            </view>
            <image
              src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
            />
          </view>
        </view>
        <view class="tagMenu" v-if="form.visit != '0' && type != '2'">
          <text style="width: 150rpx">服务时间</text>
          <view class="flex_row_start_center wight" @tap="changeSelectTime">
            <view v-show="form.service_time != ''" class="info">{{
              form.service_time
            }}</view>
            <view
              v-if="form.service_time == '' && form.visit == '2'"
              class="infos"
              >请选择预约上门时间</view
            >

            <image
              src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
              v-show="form.visit != '1'"
            />
          </view>
        </view>
        <view class="tagMenu">
          <text style="width: 150rpx">所在地区</text>
          <view class="flex_row_start_center wight" @tap="changeSelectMap">
            <view v-show="locationName != ''" class="info">{{
              locationName
            }}</view>
            <image
              src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
            />
          </view>
        </view>
      </view>
      <view
        class="tagMenuDesign"
        :class="showDesign && designCorp.selectType ? 'tagMenuDesigns' : ''"
        v-if="type != '2' && locationName != ''"
      >
        <view class="designBox">
          <text style="width: 150rpx">设计服务</text>
          <view class="flex_row_start_center wight" @click="showDesignOrCrop">
            <view
              v-show="!showDesign || (showDesign && !designCorp.selectType)"
              class="info"
            >
              {{ locationInfo.design_num }}位服务者可供选择
            </view>
            <image
              src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
            />
          </view>
        </view>
        <view class="box" v-if="showDesign && designCorp.selectType">
          <DesignOrCorpItem
            v-if="showDesign && designCorp.selectType"
            :item="designCorp"
            :text="'select'"
            :type="designCorp.selectType"
            @closeItem="closeItem"
          ></DesignOrCorpItem>
        </view>
      </view>

      <view class="note" style="margin-top: 20rpx">
        <text style="width: 150rpx">备注</text>
        <view class="textareaStyle">
          <up-textarea
            v-model="form.desc"
            maxlength="140"
            :height="150"
            placeholder="用一句话描述你的需求，如设计风格、装修预算等"
            count
            :formatter="formatter"
            ref="textareaRef"
            placeholderStyle="font-size:24rpx"
          ></up-textarea>
        </view>
      </view>
      <view class="send" @tap="addDammer"> 立即发布 </view>
    </view>
    <up-picker
      :show="showType"
      :columns="columns"
      :confirmColor="'#D0A564'"
      keyName="label"
      @confirm="handleSelect"
      @cancel="handleCancelSelect"
    ></up-picker>
    <up-datetime-picker
      :show="showTime"
      :minDate="form.service_time"
      v-model="timevalue"
      @cancel="handleTime"
      :confirmColor="'#D0A564'"
      @confirm="handleSaveTime"
      mode="datetime"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { checkLogin } from "@/utils/auth.js";
import { ref, onMounted } from "vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import { demand_add, mapGetInfo, requireType } from "@/api/require.js";
import DesignOrCorpItem from "@/components/designOrCorpItem.vue";
// 头部的高度
const headHeight = ref("");
// 导航栏的右边距
const navPaddingRight = ref("");
// 导航栏的高度
const navHeight = ref("");
//胶囊高度: "value",
const menuButtonheight = ref("");
// 导航栏距离顶部的距离
const navTop = ref("");

const show = ref(false);
const textareaRef = ref(null);

onMounted(() => {
  // 删除内容
  console.log("删除内容");
  form.value.service_time = getDateTime();
  form.value.visit = "1";
  uni.setStorageSync("location", "");
  uni.setStorageSync("locationName", "");
  location.value = "";
  locationName.value = "";
  locationInfo.value = "";
  designCorp.value = "";
  uni.setStorageSync("designCorp", "");
  form.value.cat_id = "";

  getType(0);
  form.value.service_time = getDateTime();
  // 获取胶囊的位置
  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
  const systemInfo = uni.getSystemInfoSync();
  // 获取系统信息
  uni.getSystemInfo({
    success: (res) => {
      // 获取状态栏的高度
      const statusBarHeight = res.statusBarHeight;
      navTop.value = menuButtonObject.top;
      navHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
      menuButtonheight.value = menuButtonObject.height * 2;
      navPaddingRight.value = (menuButtonObject.width + 6) * 2;
      headHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
    },
  });
  if (textareaRef.value) {
    textareaRef.value.setFormatter(formatter);
  }
});

const changeSelectMap = () => {
  uni.navigateTo({
    url: "/pages/requireB/map/index?isDesign=1",
  });
};
const form = ref({
  cat_id: "", //需求类型:1=家装设计,2=公装设计,3=家装施工,4=公装施工,5=家具购买,6=家具定制
  desc: "", //需求描述
  province: "", //省code
  city: "", //市
  county: "", //区code
  address: "", //详细地址
  service_time: "", //服务时间,type=1,2装修设计才有
  corp_id: "", //企业id
  design_id: "", //设计师id,type=1,2装修设计才有,非必填
  location: "",
  visit: "1",
});
//类型的切换
const type = ref(uni.getStorageSync("reqiureType") || 1);
const typeClick = (code) => {
  console.log(code);
  type.value = code;
  form.value.service_time = getDateTime();
  form.value.visit = "1";
  uni.setStorageSync("location", "");
  uni.setStorageSync("locationName", "");
  location.value = "";
  locationName.value = "";
  locationInfo.value = "";
  designCorp.value = "";
  uni.setStorageSync("designCorp", "");
  uni.setStorageSync("reqiureType", code);
  form.value.cat_id = "";
  getType(code);
};
//二级类型选择
const typeClick1 = (code) => {
  form.value.cat_id = code;
};
//发布需求
const addDammer = async () => {
  if (!checkLogin()) {
    return;
  }
  if (form.value.cat_id == "") {
    uni.$u.toast("请选择分类");
    return;
  }
  if (type.value != "2" && form.value.visit == "") {
    uni.$u.toast("请选择测量方式");
    return;
  }
  if (form.value.visit == "2" && form.value.service_time == "") {
    uni.$u.toast("请选择预约时间");
    return;
  }
  if (locationName == "") {
    uni.$u.toast("请选择地址");
    return;
  }
  if (form.value.province == "") {
    uni.$u.toast("请选择地址");
    return;
  }

  if (designCorp.value != "" && designCorp.value.selectType == "1") {
    form.value.design_id = designCorp.value.id;
  } else if (designCorp.value != "" && designCorp.value.selectType == "2") {
    form.value.corp_id = designCorp.value.id;
  }
  const res = await demand_add(form.value);
  //发布成功之后清空
  console.log(res);
  if (res.code == 1) {
    uni.navigateTo({
      url: "/pages/requireB/sendSuccess/index",
    });
    for (let key in form.value) {
      form.value[key] = "";
    }
    form.value.service_time = getDateTime();
    form.value.visit = "1";
    uni.setStorageSync("location", "");
    uni.setStorageSync("locationName", "");
    location.value = "";
    locationName.value = "";
    locationInfo.value = "";
    designCorp.value = "";
    uni.setStorageSync("designCorp", "");
  } else {
    uni.$u.toast(res.msg);
  }
};

// 格式化方法
const formatter = (val) => {
  // 让输入框过滤空格
  return val.replace(/\s+|\s+$/g, "");
};
const dateArray = ref([]);

//获取经纬度信息
const location = ref("");
const locationName = ref("");
const designCorp = ref("");
const showDesign = ref(false);

onReady(() => {
  form.value.service_time = getDateTime();
  form.value.visit = "1";
  form.value.cat_id = "";

  uni.setStorageSync("location", "");
  uni.setStorageSync("locationName", "");
  uni.setStorageSync("designCorp", "");
  location.value = "";
  locationName.value = "";
  locationInfo.value = "";
  designCorp.value = "";
});
onShow(() => {
  console.log(uni.getStorageSync("location"));
  location.value = uni.getStorageSync("location") || "";
  if (location.value != "") {
    getLocalInfo();
    showDesign.value = false;
  }
  type.value = uni.getStorageSync("reqiureType") || 1;
  console.log(type.value);
  designCorp.value = uni.getStorageSync("designCorp");
  console.log("选择的企业或设计师", designCorp.value);
  if (designCorp.value != "") {
    showDesign.value = true;
  } else {
    showDesign.value = false;
  }
});
const herder = ref([]);
const subHeader = ref([]);
const getType = async (code) => {
  const res = await requireType({
    pid: code,
  });
  if (code == 0) {
    herder.value = res.data.list;
    type.value = res.data.list[0].id;
    getType(type.value);
  } else {
    subHeader.value = res.data.list;
  }
  console.log(res);
};
//获得地址相关信息
const locationInfo = ref("");
const getLocalInfo = async () => {
  let obj;
  if (type.value == "1" || type.value == "3") {
    obj = {
      location: location.value,
      get_design_num: "1",
    };
  } else {
    obj = {
      location: location.value,
      get_design_num: "0",
    };
  }
  const res = await mapGetInfo(obj);
  if (res.code == 1) {
    locationInfo.value = res.data.res;
    form.value.province = res.data.res.province;
    form.value.city = res.data.res.city;
    form.value.county = res.data.res.county;
    form.value.address = res.data.res.address;
    form.value.location = location.value;
    locationName.value =
      res.data.res.province_name +
      res.data.res.city_name +
      res.data.res.county_name +
      res.data.res.address;
  } else {
    locationInfo.value = "";
    form.value.province = "";
    form.value.city = "";
    form.value.county = "";
    form.value.address = "";
    form.value.location = "";
  }
};

const changeSelectTime = () => {
  console.log("获取时间", form.value.visit);
  if (form.value.visit == "2") {
    showTime.value = true;
  }
};
const handleTime = () => {
  showTime.value = false;
};
const showTime = ref(false);
const timevalue = ref(new Date());
const handleSaveTime = async (e) => {
  console.log(e);
  const timeFormat = uni.$u.timeFormat;
  let timeValue = await timeFormat(e.value, "yyyy-mm-dd hh:MM");
  form.value.service_time = timeValue;
  console.log(timeValue);
  showTime.value = false;
};
const showDesignOrCrop = () => {
  uni.navigateTo({
    url:
      "/pages/requireB/designOrCorp/index?city_code=" +
      form.value.city +
      "&province_code=" +
      form.value.province,
  });
};

const showType = ref(false);
const columns = ref([
  [
    {
      label: "无需上门",
      id: "0",
    },
    {
      label: "立即上门",
      id: "1",
    },
    {
      label: "预约上门",
      id: "2",
    },
  ],
]);

const changeSelect = () => {
  showType.value = true;
};
const handleSelect = (v) => {
  form.value.visit = v.value[0].id;
  showType.value = false;
  if (form.value.visit == "1") {
    const now = new Date();
    form.value.service_time = getDateTime();
  } else if (form.value.visit == "0" || form.value.visit == "2") {
    form.value.service_time = "";
  }
};
const handleCancelSelect = (v) => {
  showType.value = false;
};

const getDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, "0");
  const day = now.getDate().toString().padStart(2, "0");
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

const closeItem = () => {
  designCorp.value = "";
  showDesign.value = false;
  uni.setStorageSync("designCorp", " ");
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  // background: rgba(254, 172, 94, 0.4);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
}

.menuButtonheight {
  width: 100%;
  position: absolute;
  font-weight: 500;
  font-size: 34rpx;
  text-align: center;
  color: #2f2f2f;
}

.topHeader {
  width: 100%;
  min-height: 292rpx;
  position: absolute;
  z-index: 1;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-image: url("https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/requireBj%402x.png");
  background-size: cover;
  background-position: center;
  background-color: transparent;

  .titleText {
    display: block;
    color: #2f2f2f;
    font-size: 32rpx;
    width: 100%;
    text-align: center;
  }

  .ucenterHeader {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-top: 56rpx;
  }

  .topHeaderSub {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-direction: row;
    padding-left: 20px;
    height: 78rpx;
    margin-left: -50rpx;

    .statusText {
      width: 210rpx;
      height: 78rpx;
      font-family: PingFangSC;
      font-weight: normal;
      line-height: 76rpx;
      letter-spacing: 0px;
      color: #333333;
      cursor: pointer;
      font-weight: 500;
      font-size: 30rpx;
      text-align: center;
      outline: none;
      background: none;
      -webkit-tap-highlight-color: transparent;
      /* 移除点击高亮 */
    }

    .active {
      -webkit-tap-highlight-color: transparent;
      /* 移除点击高亮 */
      text-align: center;
      background-image: url("https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/selectItem%402x.png");
      background-size: cover;
      background-position: center;
      background-color: transparent;
      width: 210rpx;
      height: 78rpx;
      font-family: PingFangSC;
      font-weight: normal;
      line-height: 76rpx;
      letter-spacing: 0px;
      color: #333333;
      cursor: pointer;
      font-weight: 500;
      font-size: 30rpx;
      text-align: center;
      outline: none;
    }

    .active::after {
      content: "";
      display: block;
      width: 35rpx;
      height: 0rpx;
      border-bottom: 6rpx solid #d5a969;
      margin: 0 auto;
      /* 水平居中 */
    }
  }
}

.mainInfo {
  width: 100%;
  height: calc(100% - 200rpx);
  overflow-y: auto;
  border-top-right-radius: 30rpx;
  padding-top: -20rpx;
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  padding-bottom: 50rpx;

  .mainSub {
    padding: 35rpx 30rpx 0;

    .statusText {
      width: 150rpx;
      height: 55rpx;
      background: #f4f4f4;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #7b7b7b;
      margin-right: 22rpx;
      line-height: 55rpx;
      text-align: center;
    }

    .active {
      width: 150rpx;
      height: 55rpx;
      text-align: center;
      line-height: 55rpx;
      margin-right: 22rpx;
      background: #faf0e1;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #d5a969;
    }
  }
}

.menuRow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 25rpx 30rpx 20rpx;
  width: calc(100% - 60rpx);
  background: #ffffff;
  box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .tagMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    width: calc(100% - 40rpx);
    padding: 0 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 50%;
    }

    image {
      width: 14rpx;
      height: 25rpx;
    }
  }

  .wight {
    width: calc(100% - 200rpx);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .info {
      margin-right: 16rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 90%;
    }

    .infos {
      font-weight: 400;
      font-size: 30rpx;
      color: #999999;
      margin-right: 16rpx;
    }
  }
}

.tagMenu1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  width: calc(100% - 100rpx);
  padding: 0 20rpx;
  margin: 0 30rpx;
  background: #ffffff;
  box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
  }

  image {
    width: 14rpx;
    height: 25rpx;
  }

  .wight {
    width: calc(100% - 200rpx);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .info {
      margin-right: 16rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 90%;
      /* 设置文本渐变背景 */
      background: linear-gradient(90deg, #05e9b8 0%, #be6bcd 100%);
      /* 让背景渐变只应用于文本 */
      background-clip: text;
      /* 为了在旧版本的浏览器中看到效果，可以设置一个实色背景 */
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}

.tagMenuDesign {
  width: calc(100% - 100rpx);
  padding: 0 20rpx;
  margin: 0 30rpx;
  background: #ffffff;
  box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .designBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  text {
    height: 100rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    line-height: 100rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
  }

  image {
    width: 14rpx;
    height: 25rpx;
  }

  .wight {
    width: calc(100% - 200rpx);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .info {
      margin-right: 16rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 90%;
      /* 设置文本渐变背景 */
      background: linear-gradient(90deg, #05e9b8 0%, #be6bcd 100%);
      /* 让背景渐变只应用于文本 */
      background-clip: text;
      /* 为了在旧版本的浏览器中看到效果，可以设置一个实色背景 */
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}

.box {
  width: calc(100% - 0rpx);
  margin: 0 auto;
  background: #f7f7f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}

.tagMenuDesigns {
  padding-bottom: 30rpx;
}

.note {
  width: calc(100% - 100rpx);
  padding: 25rpx 20rpx 30rpx;
  margin: 0 30rpx;
  background: #ffffff;
  box-shadow: 0rpx 5rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
  }

  .textareaStyle {
    margin-top: 14rpx;
    height: 340rpx;
  }

  ::v-deep .u-textarea {
    background: #f7f7f7;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #eeeeee;
    height: 300rpx;
  }
}

.send {
  width: calc(100% - 60rpx);
  margin: 50rpx auto;
  height: 88rpx;
  background: linear-gradient(115deg, #f2bd6f 0%, #cca05f 100%);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  font-weight: 500;
  font-size: 34rpx;
  color: #ffffff;
  text-align: center;
  line-height: 88rpx;
}
</style>
